<template>
  <view class="userTagsList">
    <scroll-view scroll-y="true" class="scroll">
      <view class="list">
        <view class="title"
          >已为您匹配到{{ userListByTags.length - 1 }}个伙伴</view
        >
        <template v-if="isSkeleton">
          <view class="skeletonBox">
            <van-skeleton title row="5" />
          </view>
          <view class="skeletonBox">
            <van-skeleton title row="5" />
          </view>
        </template>
        <UserItem
          :userDetail="item"
          @showUserIntro="showUserIntro"
          v-for="(item, index) in matchUserListByTags"
          :key="index"
        />
      </view>

      <EmptyBox v-if="isEmpty" />
    </scroll-view>
  </view>
</template>

<script>
import UserItem from "../../../components/home/UserItem.vue";
import EmptyBox from "../../../components/public/EmptyBox.vue";
import { mapState } from "vuex";
export default {
  name: "UserList",
  components: {
    UserItem,
    EmptyBox,
  },

  data() {
    return {
      isSkeleton: true,
      isEmpty: false,
      matchUserListByTags: [],
    };
  },

  computed: {
    ...mapState(["userListByTags", "userInfo"]),
  },
  methods: {
    // 展示用户联系信息
    showUserIntro(userDetail) {
      this.$emit("showUserIntro", userDetail);
    },

    // 获取用户列表
    async getUserListData() {
      this.isSkeleton = true;
      await this.$store.dispatch("getUserListByTags", {
        tags: this.userInfo.tags,
      });
      this.isSkeleton = false;
      if (!this.userListByTags.length) {
        this.isEmpty = true;
      } else {
        this.userListByTags.forEach((item, index) => {
          // 延迟触发动画效果
          setTimeout(() => {
            if (item._id !== this.userInfo._id)
              this.matchUserListByTags.push(item);
          }, 100 * index);
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.userTagsList {
  box-sizing: border-box;
  padding: 20rpx 20rpx 40rpx 20rpx;
  width: 100%;
  .title {
    margin-bottom: 100rpx;
    color: #aaa;
    font-size: 26rpx;
    padding-bottom: 5rpx;
  }

  .list {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .skeletonBox {
    padding: 10rpx 20rpx;
    padding-top: 30rpx;
    margin-bottom: 120rpx;
    width: 600rpx;
    height: 380rpx;
    border-radius: 20rpx;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
  }
  .scroll {
    width: 100%;
    height: calc(100vh - 280rpx);
  }
}
</style>
